Análise de Template Literals em TypeScript: Manipulação Avançada de Tipos de String

            type Color = "red" | "green" | "blue";
type Shade = "light" | "dark";

type ColorCombination = `${Shade} ${Color}`;

// ColorCombination é agora "light red" | "light green" | "light blue" | "dark red" | "dark green" | "dark blue"

            

              
                Copy
              
            
          

            type Greeting = `Hello, ${string}!`;

// Exemplo de Utilização
const greet = (name: string): Greeting => `Hello, ${name}!`;

const message: Greeting = greet("World"); // Válido
const invalidMessage: Greeting = "Goodbye, World!"; // Erro: O tipo '"Goodbye, World!"' não pode ser atribuído ao tipo '`Hello, ${string}!`'.

            

              
                Copy
              
            
          

            type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = `/api/users` | `/api/products`;

type Route = `${HTTPMethod} ${Endpoint}`;

// Route é agora "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

            

              
                Copy
              
            
          

            type GetFileExtension = T extends `${string}.${infer Extension}` ? Extension : never;

// Exemplos
type Extension1 = GetFileExtension<"myFile.txt">; // "txt"
type Extension2 = GetFileExtension<"anotherFile.image.jpg">; // "image.jpg" (captura a última extensão)
type Extension3 = GetFileExtension<"noExtension">; // never

            

              
                Copy
              
            
          

            type ParseConnectionString = 
  T extends `${infer Protocol}://${infer Host}:${infer Port}` ?
    { protocol: Protocol, host: Host, port: Port } : never;

// Exemplo
type Connection = ParseConnectionString<"http://localhost:3000">; 
// { protocol: "http", host: "localhost", port: "3000" }

type InvalidConnection = ParseConnectionString<"invalid-connection">; // never

            

              
                Copy
              
            
          

Este tipo analisa uma string de conexão nos seus componentes de protocolo, host e porta.

Definições de Tipos Recursivos para Análise Complexa

Para estruturas de string mais complexas, pode usar definições de tipo recursivas. Isto permite analisar repetidamente partes de um tipo de string até alcançar o resultado desejado.

Digamos que pretende dividir uma string num array de caracteres individuais ao nível do tipo. Isto é consideravelmente mais avançado.

            type StringToArray = 
  T extends `${infer Char}${infer Rest}`
    ? StringToArray
    : Acc;

// Exemplo
type MyArray = StringToArray<"hello">; // ["h", "e", "l", "l", "o"]

            

              
                Copy
              
            
          

Explicação:

• StringToArray<T extends string, Acc extends string[] = []>: Define um tipo genérico chamado StringToArray que recebe um tipo de string T como entrada e um acumulador opcional Acc que por defeito é um array de strings vazio. O acumulador irá armazenar os caracteres à medida que os processamos.
• T extends `${infer Char}${infer Rest}`: Esta é a verificação de tipo condicional. Verifica se a string de entrada T pode ser dividida num primeiro caractere Char e no resto da string Rest. A palavra-chave infer é usada para capturar estas partes.
• StringToArray<Rest, [...Acc, Char]>: Se a divisão for bem-sucedida, chamamos recursivamente StringToArray com o Rest da string e um novo acumulador. O novo acumulador é criado espalhando o Acc existente e adicionando o caractere atual Char ao final. Isto efetivamente adiciona o caractere ao array acumulador.
• Acc: Se a string estiver vazia (a verificação do tipo condicional falha, o que significa que não há mais caracteres), retornamos o array acumulado Acc.

Este exemplo demonstra o poder da recursividade na manipulação de tipos de string. Cada chamada recursiva retira um caractere e adiciona-o ao array até que a string esteja vazia.

Trabalhar com Delimitadores

Os template literals podem ser facilmente usados com delimitadores para analisar strings. Digamos que pretende extrair palavras separadas por vírgulas.

            type SplitString = 
  T extends `${infer First}${D}${infer Rest}`
    ? [First, ...SplitString]
    : [T];

// Exemplo
type Words = SplitString<"apple,banana,cherry", ",">; // ["apple", "banana", "cherry"]

            

              
                Copy
              
            
          

Este tipo divide recursivamente a string em cada ocorrência do delimitador D.

Aplicações Práticas

Estas técnicas avançadas de análise de template literals têm inúmeras aplicações práticas em projetos TypeScript.

Validação de Dados

Pode validar dados baseados em string contra padrões específicos em tempo de compilação. Por exemplo, validar endereços de e-mail, números de telefone ou números de cartão de crédito. Esta abordagem fornece feedback antecipado e reduz erros em tempo de execução.

Aqui está um exemplo de validação de um formato simplificado de endereço de e-mail:

            type EmailFormat = `${string}@${string}.${string}`;

const validateEmail = (email: string): email is EmailFormat => {
  // Na realidade, uma regex muito mais complexa seria usada para uma validação de e-mail adequada.
  // Isto é apenas para fins de demonstração.
  return /.+@.+\..+/.test(email);
}

const validEmail: EmailFormat = "user@example.com"; // Válido
const invalidEmail: EmailFormat = "invalid-email"; // O tipo 'string' não pode ser atribuído ao tipo '`${string}@${string}.${string}`'.

if(validateEmail(validEmail)) {
    console.log("Email Válido");
}

if(validateEmail("invalid-email")) {
  console.log("Isto não será impresso.");
}

            

              
                Copy
              
            
          

Embora a validação em tempo de execução com uma regex ainda seja necessária para casos onde o verificador de tipos não consegue impor totalmente a restrição (por exemplo, ao lidar com dados externos), o tipo EmailFormat fornece uma valiosa primeira linha de defesa em tempo de compilação.

Geração de Endpoints de API

Os template literals podem ser usados para gerar tipos de endpoints de API com base numa URL base e num conjunto de parâmetros. Isto pode ajudar a garantir consistência e segurança de tipos ao trabalhar com APIs.

            type BaseURL = "https://api.example.com";
type Resource = "users" | "products";
type ID = string | number;

type GetEndpoint = `${BaseURL}/${T}/${U}`;

// Exemplos
type UserEndpoint = GetEndpoint<"users", 123>; // "https://api.example.com/users/123"
type ProductEndpoint = GetEndpoint<"products", "abc-456">; // "https://api.example.com/products/abc-456"

            

              
                Copy
              
            
          

Geração de Código

Em cenários mais avançados, os tipos de template literal podem ser usados como parte de processos de geração de código. Por exemplo, gerar consultas SQL com base num esquema ou criar componentes de UI com base num ficheiro de configuração.

Internacionalização (i18n)

Os template literals podem ser valiosos em cenários de i18n. Por exemplo, considere um sistema onde as chaves de tradução seguem uma convenção de nomenclatura específica:

            type SupportedLanguages = 'en' | 'es' | 'fr';
type TranslationKeyPrefix = 'common' | 'product' | 'checkout';

type TranslationKey = `${TPrefix}.${string}`;

// Exemplo de utilização:
const getTranslation = (key: TranslationKey, lang: SupportedLanguages): string => {
  // Simula a obtenção da tradução de um pacote de recursos com base na chave e no idioma
  const translations: Record> = {
    'common.greeting': {
      en: 'Hello',
      es: 'Hola',
      fr: 'Bonjour',
    },
    'product.description': {
      en: 'A fantastic product!',
      es: '¡Un producto fantástico!',
      fr: 'Un produit fantastique !',
    },
  };

  const translation = translations[key]?.[lang];
  return translation || `Tradução não encontrada para a chave: ${key} no idioma: ${lang}`;
};

const englishGreeting = getTranslation('common.greeting', 'en'); // Hello
const spanishDescription = getTranslation('product.description', 'es'); // ¡Un producto fantástico!
const unknownTranslation = getTranslation('nonexistent.key' as TranslationKey, 'en'); // Tradução não encontrada para a chave: nonexistent.key no idioma: en

            

              
                Copy
              
            
          

O tipo TranslationKey garante que todas as chaves de tradução sigam um formato consistente, o que simplifica o processo de gestão de traduções e prevenção de erros.

Limitações

Embora os tipos de template literal sejam poderosos, eles também têm limitações:

• Complexidade: A lógica de análise complexa pode rapidamente tornar-se difícil de ler e manter.
• Desempenho: O uso extensivo de tipos de template literal pode impactar o desempenho em tempo de compilação, especialmente em projetos grandes.
• Lacunas de Segurança de Tipo: Como demonstrado no exemplo de validação de e-mail, as verificações em tempo de compilação por vezes não são suficientes. A validação em tempo de execução ainda é necessária para casos em que dados externos devem aderir a formatos rigorosos.

Melhores Práticas

Para usar eficazmente os tipos de template literal, siga estas melhores práticas:

• Mantenha Simples: Divida a lógica de análise complexa em tipos menores e mais fáceis de gerir.
• Documente os Seus Tipos: Documente claramente o propósito e a utilização dos seus tipos de template literal.
• Teste os Seus Tipos: Crie testes unitários para garantir que os seus tipos se comportam como esperado.
• Equilibre a Validação em Tempo de Compilação e em Tempo de Execução: Use tipos de template literal para validação básica e verificações em tempo de execução para cenários mais complexos.

Conclusão

Os tipos de template literal do TypeScript fornecem uma forma poderosa e flexível de manipular tipos de string em tempo de compilação. Ao combinar template literals com tipos condicionais e inferência de tipos, pode criar lógicas sofisticadas ao nível de tipo para analisar, validar e transformar dados baseados em string. Embora existam limitações a considerar, os benefícios de usar tipos de template literal em termos de segurança de tipo e manutenibilidade do código podem ser significativos.

Ao dominar estas técnicas avançadas, os desenvolvedores podem criar aplicações TypeScript mais robustas e confiáveis.

Exploração Adicional

Para aprofundar a sua compreensão dos tipos de template literal, considere explorar os seguintes tópicos:

• Tipos Mapeados: Aprenda como transformar tipos de objeto com base em tipos de template literal.
• Tipos de Utilidade: Explore os tipos de utilidade integrados do TypeScript que podem ser usados em conjunto com tipos de template literal.
• Tipos Condicionais Avançados: Aprofunde as capacidades dos tipos condicionais para lógicas de tipo mais complexas.